import React, { Component } from "react";

// 函数组件，可以使用props形参来接受父组件的自定义属性
const Child1 = (props) => {
  console.log(props);
  return (
    <div>
      这是child1组件 - {props.name} - {props.age}
    </div>
  );
};

// 类组件，可以通过this.props来接受
class Child2 extends Component {
  render() {
    console.log(this);
    return <div>这是child2组件 - {this.props.name}</div>;
  }

  // props的值是不能被修改的
  // componentDidMount() {
  //   setTimeout(() => {
  //     this.props.name = "xiaogao";
  //   }, 2000);
  // }
}

class App extends Component {
  render() {
    return (
      <>
        <h2>props的传值</h2>
        <Child1 name="xiangge" age="18" />
        <Child2 name="laogao" />
      </>
    );
  }
}

export default App;
